<template>
  <div>
    <!-- <draggable-resizable
      :list="tableData"
      :element="'tbody'"
      :handle="'.drag-handle'"
      :width="tableWidth"
      :height="tableHeight"
      @resize="onResize"
      @end="onEndDrag"
    >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="年龄" prop="age"></el-table-column>
        <el-table-column label="地址" prop="address">
          <template slot-scope="scope">
            <span class="drag-handle">☰</span>{{ scope.row.address }}
          </template>
        </el-table-column>
      </el-table>
    </draggable-resizable> -->
    <el-rate v-model="value"></el-rate>
    <el-rate v-model="value" :icon-classes="iconClasses" :show-score='true' :score-template="scoreText" 
      void-icon-class="iconfont icon-qizi" :colors="['#5ed1fa', '#5ed1fa', '#5ed1fa']">
    </el-rate>
  </div>
</template>

<script>
import DraggableResizable from "vue-draggable-resizable";

export default {
  name: "MyTable",
  components: {
    DraggableResizable,
  },
  data() {
    return {
      tableData: [
        { name: "张三", age: 18, address: "北京市海淀区" },
        { name: "李四", age: 20, address: "上海市静安区" },
        { name: "王五", age: 22, address: "广州市天河区" },
        { name: "赵六", age: 24, address: "深圳市南山区" },
      ],
      tableWidth: 0,
      tableHeight: 0,
      value: 5,
      allowhalf: true,
      iconClasses: ['iconfont icon-qizi', 'iconfont icon-qizi', 'iconfont icon-qizi'] // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
    };
  },
  computed: {
    scoreText() {
      const texts = ['很差', '较差', '一般', '较好', '很好'];
      
      return `${this.value}分 ${texts[0]}`;
    },
  },
  mounted() {
    this.tableWidth = this.$el.offsetWidth;
    this.tableHeight = this.$el.offsetHeight;
  },
  methods: {
    onResize(event) {
      this.tableWidth = event.width;
      this.tableHeight = event.height;
    },
    onEndDrag(event) {
      const newIndex = event.newIndex;
      const oldIndex = event.oldIndex;
      const element = this.tableData.splice(oldIndex, 1)[0];
      this.tableData.splice(newIndex, 0, element);
    },
  },
};
</script>
<style></style>